!!! 5
%html
  %head
    %title Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
  
    %meta{charset: 'utf-8'}
    %meta{content: 'IE=edge,chrome=1', 'http-equiv': 'X-UA-Compatible'}
    
    %meta{property: 'og:title',         content: 'Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …'}
    %meta{property: 'og:description',   content: 'With Timesheet.js you can easily create simple time and data sheets or timelines using HTML5, JavaScript and CSS3. Yep, it\'s a Vanilla JS library!'}
    %meta{property: 'og:url',           content: 'https://sbstjn.github.io/timesheet.js/'}
    %meta{property: 'og:image',         content: 'https://raw.githubusercontent.com/sbstjn/timesheet.js/master/screen.png'}
    %meta{property: 'fb:admins',        content: '669118929'}
    
    %script{type: 'text/javascript', src: './script/lib.js'}
    %script{type: 'text/javascript', src: './script/timesheet.min.js'}
    %script{type: 'text/javascript', src: './script/main.js'}
    
    %link{rel: 'stylesheet', type: "text/css", href: "./styles/style.css"}
    %link{rel: 'stylesheet', type: "text/css", href: "./styles/timesheet.css"}
    %link{rel: 'stylesheet', type: "text/css", href: "./styles/timesheet-white.css"}
    
    %link{rel: 'stylesheet', type: "text/css", href: "https://fonts.googleapis.com/css?family=Oxygen+Mono:400,600,800"}
    %link{rel: 'stylesheet', type: "text/css", href: "https://fonts.googleapis.com/css?family=Open+Sans:400,600,800"}
    %link{rel: 'stylesheet', type: "text/css", href: "https://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700"}
    
  %body.black
    #box
      #box-inner
        %h1
          Timesheet<span>.js</span>
        %p Visualize your data and events with sexy <span>HTML5</span> and <span>CSS3</span>. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well …
        #timesheet-default
        %p Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customized by almighty you.
        %code
          %pre!='&lt;script src="/javascripts/timesheet.js" type="text/javascript" /&gt;'
        %p Create a simple time sheet based on a JS array of events:
        %code
          %pre!=code
        %p It's that simple to use <span>Timesheet.js</span>. So, have a nice day, thank you for smoking and maybe try using Timesheet.js with custom styles …
        
        %p.footer  <a href='https://github.com/sbstjn/timesheet.js'>Timesheet.js</a> is licensed under <a href='https://github.com/sbstjn/timesheet.js/blob/master/LICENSE.md'>MIT License</a><br />Cheers to <a href='https://twitter.com/cheeaun'>Cheeaun</a> and <a href='https://twitter.com/igrigorik/'>Ilya</a><br /><br /><br /><span><a href='http://S11K.com'>❤</a></span><br /><br /><a href='#dark' id='switch-dark'>dark</a> | <a href='#light' id='switch-light'>light</a>
        
    %span  <a href='https://github.com/sbstjn/timesheet.js'><img style='position: absolute; top: 0; right: 0; border: 0;' src='https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67' alt='Fork Timesheet.js on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png'></a>
    %script{type: 'text/javascript'} var _gauges = _gauges || []; (function() { var t = document.createElement('script'); t.type = 'text/javascript'; t.async = true; t.id = 'gauges-tracker'; t.setAttribute('data-site-id', '538272a38bfdf705f50037c3'); t.src = '//secure.gaug.es/track.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(t, s); })();
